<template>
    <div class="container">
        <div v-if="current == 'a'" class="editor-div">
            <VueMarkdownIt
            class="show"
            style=""
            :source='props.value' :plugins='plugins'>
            </VueMarkdownIt>
        </div>
        <!-- style="border: 1px solid black;height: 100%;padding-left: 8px;border-radius: 7px;margin-top: 7px;" -->
    </div>
</template>

<script>
import { ref } from 'vue'
import { reactive } from 'vue'
import "@/assets/css/markdown.css"

import VueMarkdownIt from 'vue3-markdown-it'
import 'highlight.js/styles/monokai.css'

import MarkdownItEmoji from 'markdown-it-emoji'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItAbbr from 'markdown-it-abbr'
import 'mavon-editor/dist/css/index.css'

export default {
    name: "CreateBlog",
    components: {
        VueMarkdownIt,
    },
    props: {
        value: {
            type: String,
            default: "",
        },
    },
    setup(props) {
        let current = ref('edit')
        let text = ref('')  
        let lang = ref('c_cpp')
        const show = () => {
            console.log(props.value)
        }
        show();
        // const copy = () => {
        //     this.textarea = markdown(mavonEditor, textarea.value);
        //     this.$nextTick(() => {
        //     let clipboard = new Clipboard(".copy-btn");
        //     // 复制成功失败的提示
        //     clipboard.on("success", () => {
        //         this.$message({
        //         message: "复制成功",
        //         type: "success",
        //         });
        //     });
        //         clipboard.on("error", () => {
        //             this.$message.error("失败");
        //         });
        //     });
        // }
        // copy()
        const langList = ref([
            {
                id: 1,
                lang: "c_cpp"
            },
            {
                id: 2,
                lang: "java"
            },
            {
                id: 3,
                lang: "python"
            },
            // {
            //     id: 4,
            //     lang: "python3"
            // },
            {
                id: 5,
                lang: "go"
            },
        ])
        let plugins = reactive([
            {
                plugin: MarkdownItAbbr
            }, 
            {
                plugin: MarkdownItSub
            }, 
            {
                plugin: MarkdownItSup
            }, 
            {
                plugin: MarkdownItDeflist
            }, 
            {
                plugin: MarkdownItEmoji
            }
        ])

        return {
            plugins,
            current,
            text,
            lang,
            langList,
        }
    }
}
</script>
<style scoped>
.editor-div {
    background-color: aliceblue;
}
.show {
    margin-left: 5px;
    margin-right: 2px;
    /* border: 1px solid black;height: 100%; */
    /* padding-left: 8px; */
    border-radius: 7px;margin-top: 7px;
}
VAceEditor {
    border: 1px solid white;
}
pre {
  white-space: pre;
  word-wrap: normal;
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 2px 3px !important;
  line-height: 1.1;
  font-size: 16px !important;
  background: #f3f4f5;
  color: #5e6687;
}

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
  color: #f92672;
}

.hljs-code {
  color: #66d9ef;
}

.hljs-class .hljs-title {
  color: #df5000;
}

.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
  color: #bf79db;
}

.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #5893c2;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #969896;
  margin-top: 5px;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
  font-weight: bold;
}

</style>




<!-- <template>
    <div class="container">
        <div>
            <el-button @click="current = 'edit'" type="primary">编辑</el-button>
            <el-button @click="current = 'show'" type="primary">预览</el-button>
            <div v-if="current == 'show'">
            <Markdown :source="text" style="background-color: white">
                <textarea style="width: 100vh; height: 50vh;">
                </textarea>
            </Markdown>
            </div>
            <div v-if="current == 'edit'">
                <textarea v-model="text" style="width: 100vh; height: 50vh;">

                </textarea>
            </div>
        </div>
    </div> 
</template>

<script>
import Markdown from 'vue3-markdown-it';
import 'highlight.js/styles/monokai.css';
import { ref } from 'vue';

export default {
    components: {
        Markdown,
    },
    setup() {
        let text = ref('');
        let current = ref('edit');

        return {
            current,
            text,
        }
    },
}
</script>

<style scoped>

</style> -->